<template>
  <div id="app">
    <img src="./assets/logo.png">
    <h1>hello mobiscroll range</h1>
    <div class="starttime time">开始时间戳：{{starttime}}</div>
    <div>格式时间：{{timeFilter(starttime)}}</div>
    <div>间隔天数：{{timeFilter((starttime*1)-(endtime*1),true)}}</div>
    <div class="endtime time">结束时间戳：{{endtime}}</div>
    <div>格式时间：{{timeFilter(endtime)}}</div>
  </div>
</template>

<script>
import Hello from './components/Hello'

export default {
  name: 'app',
  data() {
    return {
      starttime:"",
      endtime:""
    }
  },
  components: {
    Hello
  },
  methods:{
    /**
     * value time
     * em string
     */
    timeFilter(value,em) {//格式化时间
       if(value){
        var time=new Date(value);
        if(!em){
            value = ((time.getMonth()+1)*1<10?"0"+(time.getMonth()+1):time.getMonth()+1)+"月";
            value += ((time.getDate())*1 < 10?"0"+(time.getDate()):time.getDate())+"日";
        }else{
            value = parseInt(Math.abs(value)/1000/60/60/24);
        }
       }
       return value;
    },
  },
  mounted() {//dom 挂载完成后
     var that=this; 
     var setDateTime=function(time,da){//公共格式化方法
        var endDate = new Date();
        if(time){
            endDate = new Date(time);
        }
        endDate = new Date(endDate.setDate(endDate.getDate() + (da?da:30)));
        return endDate;
     };
     that.starttime=setDateTime("",1).getTime();//设置默认值 明天
     that.endtime=setDateTime("",2).getTime();//设置默认值 后天
     var instance = mobiscroll.range('.starttime,.endtime', {//创建mobiscroll
        theme: 'material',
        lang: 'zh',
        display: 'center',
        controls: ['calendar'],
        min: new Date(),
        max: setDateTime(),
        defaultValue: [ setDateTime("",1), setDateTime("",2)],
        onSet: function (event, inst) {
            that.starttime=(inst.getVal()[0]).getTime();//选择后设置
            that.endtime=(inst.getVal()[1]).getTime();//选选择后设置值
        }
     });
  }

}
</script>

<style>
body{
  overflow: hidden;
}
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin: 0 auto;  
  margin-top: 60px;
  padding:0 40px;
  width: 500px;
}
#app > div{
  text-align: left;
  height:40px;
  line-height: 40px;
  margin-bottom: 10px;
  border-radius: 8px;
  border:1px solid #dedede;
  padding-left:10px;
  font-size: 12px;
}
#app > div.time{
  font-size: 16px;
  color: #458B00;
  text-decoration:underline;
  background-color: #f9f9f9;
  text-align: center;
}
</style>
